<template>
    <div class="min-h-screen ">
        <!-- <h1>下载页面</h1> -->
        <div class="text-center w-full min-w-[1250px]">
            <img src="/src/assets/image/2021091815271867565042.png" alt="" class="w-full">
        </div>
        <div class="container mx-auto relative px-4 md:px-16">
            <!-- 下载框 -->
            <div class="container bg-gray-100  text-center p-10 box-border ">
                <p class="text-2xl"><b>{{ downloadData.itemName }}</b></p>
                <div class="mx-auto">
                    <div class="text-gray-600 px-2 py-4  ml-10">
                        <p> 数据包加载成功，如果没有下载提示，请点击下方下载链接</p>
                        <p class="text-red-400" v-if="downloadData.downloadStatus === 1"> 你已经下载过本产品了，确认重新下载吗？上次下载时间：{{ downloadData.downloadTime }}</p>
                    </div>
                    <div class="overflow-hidden flex justify-center ">
                        <div class="overflow-hidden p-6 box-border ml-10 mt-10 rounded-lg   bg-white ">
                            <div class=" overflow-hidden flex items-center">
                                <img width="120px"
                                    src="https://ai-public.mastergo.com/ai/img_res/ccb790705b4f9ba747de845bc65a94ac.jpg">
                                <div class="float-left w-[220px] pl-5 text-left">
                                    <div class="h-6 leading-6 "><b style="font-size:15px">原数据包</b></div>
                                    <p class="mt-[44px] mb-3 text-gray-400 ">大小：{{ downloadData.size }} M</p>
                                    <p class="text-gray-400">压缩包类型：{{ downloadData.type }}</p>
                                </div>
                            </div>
                            <!-- 按钮 -->
                            <div class="flex justify-between mt-4">
                                <!-- 下载之后 按钮变成 bg-gray-500 -->
                                <a :href="downloadData.url"
                                    class=" bg-rose-700 h-9 leading-9 rounded-sm text-center text-sm font-bold mx-1.5 text-white px-8">普通下载</a>
                                <a href="#"
                                    class="inline-block bg-sky-500 h-9 leading-9 rounded-sm text-center text-sm font-bold mx-1.5 text-white px-8">移动专线下载</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 商品列表 -->
            <div class="container mx-auto  mt-8">
                <div class="grid grid-cols-6 gap-6">
                    <div v-for="(product, index) in products" :key="index"
                        class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="relative">
                            <a :href="`/productDetails/${product.id}`" target="_blank">
                                <div class="groom" v-if="product.recommend"></div>
                                <img :src="product.image" :alt="product.name"
                                    class="w-full aspect-square object-cover" />
                            </a>
                        </div>
                        <div class="p-4">
                            <a href="#" target="_blank">
                                <h3 class="text-sm text-gray-800">{{ product.name }}</h3>
                            </a>
                            <div class="mt-2 flex items-center justify-between">
                                <span class="text-orange-500 text-lg font-medium">¥{{ product.price }}</span>
                            </div>
                            <p class="text-gray-400 text-xs mb-2 mt-1">
                                {{ product.description }}
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
const products = ref();
//todo 获取商品数据的方法
const getProductList = async () => {
    //获取主页产品数据
    await loadLocalJson("json/download/products.json").then((res) => {
        products.value = res.data.products;
    });
};
const downloadData = ref({});
//todo  获取下载数据
const getDownloadData = async () => {
    //获取下载数据
    await loadLocalJson("json/download/downloadData.json").then((res) => {
        downloadData.value = res.data;
        console.log(downloadData.value);
    });
};
onMounted(async () => {
    await getProductList();
    await getDownloadData();
});
</script >
<style lang="less" scoped>
</style>